<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开箱动画</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e0c9a5;
    }
    .boxas{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform-style: preserve-3d;
        perspective: 1000px;
        transform: rotateX(-20deg);
    }
    .sides{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #c09551;
        border: 1px solid #e4c084;
    }
    .fronts{
        transform: translateZ(100px)
    }
    .backs{
        transform: translateZ(-100px) rotateY(180deg);

    } 
    .lefts{
        transform: translateX(-100px) rotateY(-90deg);
        
    }
    .rights{
        transform: translateX(100px) rotateY(90deg);
        
    }
    .tops{
        transform: translateY(-100px) rotateX(90deg);
        background-color: transparent;
        transform-style: preserve-3d;
    }
    .tops div{
        background-color: #c09551;
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        border: 1px solid #e4c084;
        transition: 0.5s;

    }
   .tops .tl{
        left: 0;
        transform-origin: left;
    }
    .tops .tr{
        right: 0;
        transform-origin: right;
    }
    .bottoms{
        transform: translateY(100px) rotateX(-90deg);
        box-shadow: 5px -5px 15px rgba(0, 0, 0, 4);
    }
   .boxas:hover .tops .tl{
        transform: rotateY(-135deg);
    }
    .boxas:hover .tops .tr{
        transform: rotateY(135deg);
    }
    .boxas .textaz{
        width: 200px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        transition: 0.6s;
       
    }
    .boxas:hover .textaz{
        transform: translateY(-250px);

    }


</style>
<body>
    <div class="boxas">
        <div class="sides fronts"></div>
        <div class="sides backs"></div>
        <div class="sides lefts"></div>
        <div class="sides rights"></div>
        <div class="sides tops">
            <div class="tl"></div>
            <div class="tr"></div>
        </div>
        <div class="side bottoms"></div>
        <div class="textaz">求三连~</div>
    </div>
</body>
</html>